<template>
    <div class="ordering">
        <!-- adv -->
        <div class="adv">
            <img :src="'./static/images/shopad.jpg'" alt="">
        </div>
        <!-- recommend -->
        <div class="recommend">
            <div>
                <p class="recTitle">商家推荐</p>
                <div class="mui-slider">
                    <div class="mui-slider-group">
                        <div class="mui-slider-item recItem" v-for="item in rec" :key="item.id">
                            <img :src="item.img">
                            <div>
                                <p class="recT">{{item.name}}</p>
                                <p class="recC">{{item.comment}}</p>
                                <div class="recP">
                                    <p><small>¥</small>{{item.price}}</p>
                                    <span class="el-icon-circle-plus" @click="addCar(item.id, rec)"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="order">
            <div class="order-left">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <ul>
                            <li @click="checked(0)" :class="{current:0==current}"><span class="el-icon-s-data"></span>热销</li>
                            <li @click="checked(1)" :class="{current:1==current}"><span class="el-icon-s-order"></span>优惠</li>
                            <li v-for="item in menu1" :key="item.id" @click="checked(item.id)" :class="{current:item.id==current}">{{item.name}}</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="order-right">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll" ref="skip">
                        <div v-for="(item, key, index) in menu2" :key="index" class="sort">
                            <!-- menu2Title -->
                            <div class="menu2Title">
                                <div class="menu2TitleTitle">
                                    <div class="category-title ccc">
                                        <strong>{{key}}</strong>
                                        <span>大家喜欢吃，才叫只好吃</span>
                                    </div>
                                </div>
                            </div>
                            <!-- ul -->
                            <ul class="mui-table-view" ref="ul">
                                <li class="mui-table-view-cell mui-media" v-for="li in item" :key="li.id">
                                    <a href="javascript:;">
                                        <img class="mui-media-object mui-pull-left" :src="li.img">
                                        <div class="mui-media-body">
                                            <p class="fooddetails-name">
                                                <span class="fooddetails-nameText">{{li.name}}</span>
                                            </p>
                                            <p class="fooddetails-desc">{{li.desc}}</p>
                                            <p class="fooddetails-sales">
                                                <span v-for="(lis, i) in li.sales" :key="i">{{lis}}</span>
                                            </p>
                                            <div class="salesInfo-price">¥ {{li.price}}</div>
                                            <div class="el-icon-circle-plus addBtn" @click="addCar(li.id, menu2, key)"></div>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottomNav">
                <transition @before-enter='beforeEnter' @enter='enter' @after-enter='afterEnter'>
                    <span class="shopcar" v-show="animationFlag" :class="$store.state.merCount > 0 ? 'shopcarOk' : ''"><span class="mui-badge mui-badge-danger">{{$store.state.merCount}}</span></span>
                </transition>
                <div class="carInfo">
                    <div class="carInfo-Top">购物车有商品<i>{{$store.state.merCount}}</i>件，共<i>¥{{$store.state.priceCount}}</i></div>
                    <div class="carInfo-bottom">另需配送费0.6元</div>
                </div>
                <a class="submitbutton" :class="$store.state.priceCount >= 20 ? 'green' : ''" @click="pay">{{toPay}}</a>
            </div>
        </div>
    </div>
</template>

<script>
import mui from '../../assets/mui/dist/js/mui.min.js'
export default {
    data() {
        return {
            current: 0,
            toPay: '¥20起送',
            menu1: [{
                id: 2,
                name: '鸡鸭随你开心第①',
            },{
                id: 3,
                name: '折扣优惠'
            },{
                id: 4,
                name: '无肉不欢生活美味'
            },{
                id: 5,
                name: '家常小炒百吃不厌'
            },{
                id: 6,
                name: '精选煲仔超值优惠'
            },{
                id: 7,
                name: '拼多多'
            },{
                id: 8,
                name: '排骨腊味真材实料'
            },{
                id: 9,
                name: '劲爽牛肉品质尊享'
            },{
                id: 10,
                name: '汤羹佐饮任君自选'
            },{
                id: 11,
                name: '温馨提示'
            },{
                id: 12,
                name: '扫一扫 领红包'
            },{
                id: 13,
                name: '元宵钜惠 畅销单品'
            },],
            menu2: {'热销': [{
                id: 1,
                img: './static/images/xzpgf.jpg',
                name: '香汁排骨煲仔饭',
                desc: '（微辣）秘制酱汁腌子排，配上飘香豆豉，嫩中带香，香中透鲜~ 主要原料: 猪肋排',
                sales: ['月售196份', '好评率100%'],
                price: '35'
            },{
                id: 2,
                img: './static/images/bfsq.jpg',
                name: '拌饭神器',
                desc: '鱼干辣酱－风味辣酱，开盖即食，拌饭、拌面均可哟 主要原料: 豆瓣酱',
                sales: ['月售148份', '好评率100%'],
                price: '5'
            },{
                id: 3,
                img: './static/images/bskl.jpg',
                name: '百事可乐',
                desc: '主要原料: 可乐',
                sales: ['月售137份', '好评率100%'],
                price: '6'
            },{
                id: 4,
                img: './static/images/fwjzf.jpg',
                name: '风味鸡杂煲仔饭',
                desc: '（重辣）新鲜六合鸡胗配上酱香坛子菜，酸辣爽口，每一口都挑逗着味蕾~ 主要原料: 鸡胗',
                sales: ['月售148份', '好评率100%'],
                price: '21.8'
            },{
                id: 5,
                img: './static/images/rwhnf.jpg',
                name: '入味黄牛肉煲仔饭',
                desc: '（中辣）澳洲进口新鲜牛键芯，用地道山茶油爆炒，辅以剁辣椒调味，筋肉交错劲道十足。主要原料: 牛肉',
                sales: ['月售125份', '好评率100%'],
                price: '28.8'
            }],
            '优惠':[{
                id: 6,
                img: './static/images/zxyp.jpg',
                name: '自选饮品',
                desc: '可乐、美年达、矿泉水，任君自选~ 主要原料: 其他',
                sales: ['月售69份', '好评率100%'],
                price: '3起',
                dis: '6折起'
            },{
                id: 7,
                img: './static/images/jdb.jpg',
                name: '加多宝',
                desc: '清热解暑 主要原料: 黑茶',
                sales: ['月售5份'],
                price: '3.8',
                dis: '7.6折'
            },{
                id: 8,
                img: './static/images/wgry.jpg',
                name: '五谷热饮',
                desc: '热热的五谷茶',
                sales: ['月售21份', '好评率100%'],
                price: '4起',
                dis: '5折'
            },{
                id: 9,
                img: './static/images/nfcy.jpg',
                name: '农夫茶饮',
                desc: '茶π、水溶C100、维他命水，任君自选~',
                sales: ['月售5份', '好评率100%'],
                price: '5.1起',
                dis: '8.5折'
            },{
                id: 10,
                img: './static/images/hspgt.jpg',
                name: '花生排骨汤',
                desc: '做一碗好汤没有捷径，精心选材，细火慢炖，一勺好汤味美而留香，花生排骨健康滋补，口感清爽润喉！主要原料: 花生',
                sales: ['月售46份', '好评率50%'],
                price: '8',
                dis: '5.3折'
            }]},
            rec: [{
                id: 100,
                name: '扫码，领红包',
                img: './static/images/rec1.jpg',
                comment: '月售0份 好评0%',
                price: '88.88'
            },{
                id: 102,
                name: '酱椒炒鸡煲仔饭',
                img: './static/images/rec2.jpg',
                comment: '月售59份 好评0%',
                price: '22.8'
            },{
                id: 103,
                name: '辣椒炒肉煲仔饭',
                img: './static/images/rec3.jpg',
                comment: '月售241份 好评86%',
                price: '20.8'
            },{
                id: 104,
                name: '入味黄牛肉煲仔饭',
                img: './static/images/rec4.jpg',
                comment: '月售125份 好评100%',
                price: '28.8'
            },{
                id: 105,
                name: '青豆炒肉沫煲仔饭',
                img: './static/images/rec5.jpg',
                comment: '月售271份 好评100%',
                price: '21.8'
            }],
            animationFlag: false
        }
    },
    mounted() {
        // 横向
        var gallery = mui('.mui-slider');
            gallery.slider({
                interval:0
        });
        // 纵向
        document.querySelector('.order').style.height = window.innerHeight - 40  + 'px';
        mui('.mui-scroll-wrapper').scroll({
            deceleration: 0.0005
        });
    },
    methods: {
        checked(i) {
            this.current = i;
            let h = this.$refs.ul[i].offsetHeight;
            this.$refs.skip.style.transition = 'all 0.6s ease';
            this.$refs.skip.style.transform = "translate3d(0px, -" + h * i + "px, 0px) translateZ(0px)";
        },
        // 添加购物车
        addCar(id, obj, category) {
            if (obj instanceof Array == false) {
                obj = obj[category]
            }            
            obj.some( item => {
                if (item.id == id) {
                    this.$store.state.merCount ++;
                    this.$store.state.priceCount += parseFloat(item.price);
                    this.$store.state.priceCount = parseFloat(this.$store.state.priceCount.toFixed(2))
                    this.animationFlag = true;
                    let o = {id: item.id, img: item.img, name: item.name, price: item.price}
                    this.$store.state.product.push(o)
                }
            })
        },
        // 购物车动画
        beforeEnter(el) {
            el.style.animation = '';
        },
        enter(el, done) {
            el.offsetWidth;
            el.style.animation = 'shopcar 0.5s ease';
            done();
        },
        afterEnter(el) {
            this.animationFlag = !this.animationFlag;
        },
        // 跳转支付页
        pay() {
            this.$router.push({path: '/pay'})
        }
    },
    updated() {
        if (this.$store.state.priceCount >= 20) {
            this.toPay = '去结算'
        } else {
            this.toPay = '¥20起送'
        }
    }
}
</script>

<style scoped>
    .ordering {
        margin: 0 auto;
    }
    .current{
        background: #fff;
    }
    /* adv */
    .adv {
        padding-top: 7px;
        background: #fff;
    }
    .adv img {
        display: block;
        margin: 0 auto;
        width: 343px;
        height: 88px;
        border-radius: 4px;
    }
    .recommend {
        padding-top: 16px;
        background: #fff;
    }
    .recTitle {
        margin: 0 0 10px 0;
        padding-left: 16px;
        color: #333;
        font-size: 16px;
        font-weight: 700;
    }
    .recBox {
        overflow-x: scroll;
        display: flex
    }
    .recInfo {
        display: flex;
    }
    .mui-slider {
        padding-left: 16px;
    }
    .recItem {
        margin-right: 10px;
        padding-bottom: 16px;
        flex: none;
        width: 120px!important;
    }
    .recItem img {
        display: block;
        width: 120px!important;
        height: 120px;
        border-radius: 2px;
        max-width: 100%;
    }
    .recT {
        margin: 0;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        color: #333;
        font-size: 14px;
    }
    .recC {
        margin: 0;
        color: #999;
        font-size: 10px;
    }
    .recP {
        display: flex;
        justify-content: space-between;
        padding-right: 1px;
    }
    .recP p {
        margin: 0;
        font-size: 17px;
        color: rgb(255, 83, 57);;
    }
    .recP span {
        color: #2396FF;
        font-size: 22px;
    }
    /* order */
    .order {
        position: relative;
        z-index: 3;
        padding-bottom: 48px;
        box-sizing: border-box;
        height: 100%;
    }
    /* 一级菜单 */
    .order-left {
        position: absolute;
        left: 0;
        overflow-y: auto;
        width: 77px;
        height: 100%;
        background-color: #f8f8f8;
        padding-bottom: 40px;
    }
    .order-left ul {
        flex: none;
        z-index: 0;
    }
    .order-left li {
        width: 100%;
        padding: 18px 8px;
        font-size: 12px;
        color: #333;
    }
    .el-icon-s-data,
    .el-icon-s-order {
        font-size: 15px;
        margin-right: 5px;
    }
    .el-icon-s-data {
        color: #FE5400;
    }
    .el-icon-s-order {
        color: #B9C5A5;
    }
    /* 二级菜单 */
    .order-right {
        position: relative;
        margin-left: 77px;
        height: 100%;
    }
    .menu2Title {
        position: relative;
        margin-left: 10px;
        padding: 8px 30px 8px 0;
    }
    .category-title {
        display: flex;
        align-items: center;
        overflow: hidden;
    }
    .category-title strong {
        margin-right: 5px;
        font-weight: 700;
        color: #666;
        font-size: 12px;
        flex: none;
    }
    .category-title span {
        flex: 1;
        color: #999;
        font-size: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .categoryItem {
        position: relative;
        margin: 0;

    }
    /* ul */
    .mui-table-view::before, 
    .mui-table-view::after, 
    .mui-table-view-cell::before,
    .mui-table-view-cell::after {
        height: 0;
    }
    .mui-media-object {
        max-width: 95px;
        width: 95px;
        height: 95px;
    }
    .fooddetails-name {
        position: relative;
        margin: 0;
        padding-right: 30px;
        display: flex;
        height: 16px;
        line-height: 16px;
        align-items: start;
    }
    .fooddetails-nameText {
        font-weight: 700;
        overflow: hidden;
        font-size: 15px;
        white-space: nowrap;
        width: 150px;
        text-overflow: ellipsis;
        color: #333;
    }
    .fooddetails-desc {
        margin: 4px 0;
        font-size: 10px;
        color: #999;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 150px;
    }
    .fooddetails-sales {
        margin: 4px 0;
        color: #999;
        font-size: 10px;
        line-height: 1;
    }
    .fooddetails-sales span {
        margin-right: 5px;
    }
    .salesInfo-price {
        position: absolute;
        bottom: 14px;
        display: flex;
        font-size: 14px;
        line-height: 15px;
        align-items: baseline;
        color: rgb(255, 83, 57);
    }
    .addBtn {
        position: absolute;
        bottom: 14px;
        right: 30px;
        font-size: 22px;
        color: #2396FF;
    }
    /* bottomNav */
    .bottomNav {
        position: fixed;
        z-index: 11;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        padding-left: 76px;
        background-color: rgba(61,61,63,.9);
        height: 48px;
    }
    .shopcar {
        position: absolute;
        left: 12px;
        bottom: 7px;
        width: 48px;
        height: 48px;
        box-sizing: border-box;
        border-radius: 50%;
        border: 5px solid #444;
        background: #363636;
        box-shadow: 0 -0.8vw 0.533333vw 0 rgba(0,0,0,.1);
        will-change: transform;
    }
    .shopcarOk {
        background: #3190e8;
    }
    .shopcar::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: url("../../../static/images/shopcar2.svg")no-repeat 8px 8px;
        background-size: 21px;
    }
    .shopcarOk::before {
        background: url("../../../static/images/shopcar.svg")no-repeat 8px 8px;
        background-size: 21px;
    }
    .carInfo {
        flex: 1;
    }
    .carInfo-Top {
        margin: 0;
        line-height: normal;
        color: #999;
        font-size: 12px;
    }
    .carInfo-Top i {
        margin: 0 3px;
        font-size: 18px;
        font-style: normal;
        color: #fff;
    }
    .carInfo-bottom {
        margin: 0;
        color: #999;
        font-size: 10px;
    }
    .submitbutton { 
        width: 105px;
        height: 100%;
        color: #fff;
        text-align: center;
        text-decoration: none;
        font-size: 14px;
        font-weight: 700;
        user-select: none;
        line-height: 48px;
    }
    .green {
        background: #38ca73;
    }
    .mui-badge {
        position: absolute;
        top: -7px;
        right: -7px;
    }
</style>

<style>
    /* animated */
    @keyframes shopcar {
        50% {
            transform: scale(.8)
        }
        75% {
            transform: scale(1.2)
        }
        100% {
            transform: scale(1)
        }
    }
</style>
